<template>
  <div style="margin-left: 50px;">
    <el-row :gutter="20" style="margin: 0 auto; width: 95%;">
      <el-col :span="20">
        <el-card class="box-card">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="分析目标" prop="goal">
              <el-input type="textarea" placeholder="请输入分析目标" :maxLength="100" v-model="form.goal"></el-input>
            </el-form-item>
            <el-form-item label="图表名称" prop="name">
              <el-input placeholder="请输入图表名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="图表类型" prop="chartType">
              <el-select placeholder="请选择图表类型" v-model="form.chartType">
                <el-option label="柱状图" value="柱状图"></el-option>
                <el-option label="折线图" value="折线图"></el-option>
                <el-option label="饼图" value="饼图"></el-option>
                <el-option label="雷达图" value="雷达图"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="原始数据">
              <el-upload
              action="/upload"
                :before-upload="beforeFileUpload"
                :limit="1"
                :http-request="handleUpload"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过1MB</div>
              </el-upload>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
  </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {

  data() {
    return {
      form: {},
      formRes: {
        conclusion: '提交后生成',
        jsCode: '提交后生成'
      },
      rules: {
        goal: [
          { required: true, message: '请输入分析目标', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入图表名称', trigger: 'blur' },
        ],
        chartType: [
          { required: true, message: '请选择图表类型', trigger: 'blur' },
        ]
      },
      fileList: [],
      fileObj: null,
      loading: false
    }
  },
  mounted() {

  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传一个文件`);
      },
      beforeFileUpload(file) {
        const isLt1MB = file.size / 1024 / 1024 < 1;
        const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        if (file === null) {
          this.$message.error('请选择文件');
        }
        if (!isExcel) {
          this.$message.error('只能上传xls/xlsx文件');
          return false
        }
        if (!isLt1MB) {
          this.$message.error('文件大小不能超过1MB');
          return false
        }
        this.fileObj = file
      },
      async onSubmit() {
        await this.$refs.form.validate(valid => {
          if (valid) {
            if (this.fileObj === null) {
              this.$message.error('请上传文件')
              return
            }
            const formData = new FormData()
            formData.append('file', this.fileObj)
            formData.append('goal', this.form.goal)
            formData.append('name', this.form.name)
            formData.append('chartType', this.form.chartType)

            this.loading = true

            this.$request.post('/chart/generate/async/mq', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then((res) => {
              if (res.code === 200) {
                // this.formRes = res.data
                // this.genChart(res.data.jsCode)
                // this.$message.success('图表生成成功')
                this.$message.success('图表生成成功，稍后请到“我的图表”查看')
                this.form = {}
              } else {
                this.$message.error(res.message)
              }
            }).finally(() => {
              this.loading = false
            })
          }
        })
      },
      reset() {
        this.form = {}
        this.fileList = []
        this.fileObj = null
      },
      handleUpload() {
        // 提供这个，就不需要指定action
      },
      genChart(option) {
        let myChart = echarts.init(document.getElementById("genChart"));
        var jsonStr = option.replace(/'/g, '"').replace(';', '');
        jsonStr = jsonStr.replace(/^option=/, '');
        var optionObj;
        try {
            optionObj = eval("("+jsonStr+")"); 
        } catch (e) {
          this.$message.error('图表数据有误，请检查');
          return false 
        }
        myChart.setOption(optionObj)
      }
  }
}
</script>

<style scoped>
.box-card {
  height: 600px;
  margin-top: 15px;
  margin-left: 15px;
  border-radius: 15px;
}
</style>
